<template>
	<view class="search">
		<Divider style="margin-top: 10rpx;"></Divider>

		<view class="search-item">
			<view class="search-title">
				<view>
					最近搜索
				</view>
				<view class="iconfont" @click="clearSearchData">
					<svg t="1667886923993" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="1922" width="32" height="32">
						<path
							d="M720 447l-48 0 0 256c0 35.347-28.656 64-64 64L384 767c-35.347 0-64-28.653-64-64L320 447l-48 0c-8.838 0-16-7.162-16-16l0-32c0-8.835 7.162-16 16-16l112 0 0-64c0-35.347 28.653-64 64-64l96 0c35.347 0 64 28.653 64 64l0 64 112 0c8.835 0 16 7.165 16 16l0 32C736 439.838 728.835 447 720 447zM416 447l-32 0 0 256 32 0L416 447zM480 703l32 0L512 447l-32 0L480 703zM544 335c0-8.838-7.162-16-16-16l-64 0c-8.838 0-16 7.162-16 16l0 48 96 0L544 335zM608 447l-32 0 0 256 32 0L608 447z"
							p-id="1923"></path>
					</svg>
				</view>
			</view>
			<view v-if="searchData.length>0">
				<view class="search-name f-color" v-for="(item,index) in searchData " :key='index' @click="makeSearch">
					{{item}}
				</view>
			</view>
			<view v-else class="search-end">
				暂无搜索记录
			</view>
		</view>

		<view class="search-item">
			<view class="search-title ">
				热门搜索
			</view>
			<view>
				<view class="search-name f-color">
					四件套
				</view>
				<view class="search-name f-color">
					面膜
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Divider from '@/components/common/Divider.vue'
	export default {
		data() {
			return {
				keyWords: '',
				searchData: []
			}
		},
		//点击顶栏搜索按钮
		onNavigationBarButtonTap(e) {
			this.search()
			this.addSearch()
			// console.log(e)
			// if(e.float === "right"){
			// 	uni.navigateTo({
			// 		url:"../search-list/search-list?keyWords="+this.keyWords
			// 	})
			// }
		},
		//监听input输入内容
		onNavigationBarSearchInputChanged(e) {
			// console.log(e)
			this.keyWords = e.text
		},
		//监听软件盘搜索按钮
		onNavigationBarSearchInputConfirmed() {

		},
		onLoad() {
			// this.getSearch()
		},

		methods: {
			//清空搜索记录
			clearSearchData() {
				this.searchData = []
			},
			makeSearch() {
				uni.navigateTo({
					url: "../search-list/search-list?keyWords=" + this.keyWords
				})
				// console.log(222222, this.keyWords)
			},
			//判断搜索关键词是否为空
			search() {
				if (this.keyWords === '') {
					return uni.showToast({
						title: "关键词不能为空",
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "../search-list/search-list?keyWords=" + this.keyWords
					})
					uni.hideKeyboard();
				}

			},
			//记录最近搜索词
			addSearch() {

				if (this.searchData != "" && this.searchData.includes(this.keyWords)) {
					// 找到关键字所在数组的下标
					let p = this.searchData.indexOf(this.keyWords)
					//删除该元素，p下标位置，1长度
					this.searchData.splice(p, 1)
					//重新添加关键字进数组
					this.searchData.unshift(this.keyWords)
					// console.log(333333, this.searchData)
				} else {
					this.searchData.unshift(this.keyWords)
				}
				// console.log(444444, this.searchData)
			}

		},
		components: {
			Divider
		},
	}
</script>

<style scoped>
	.search-end {
		text-align: center;
	}

	.search-item {
		padding: 20rpx;
	}

	.search-title {
		display: flex;
		justify-content: space-between;
	}

	.search-name {
		padding: 4rpx 24rpx;
		background-color: #e1e1e1;
		display: inline-block;
		border-radius: 26rpx;
		margin: 10rpx;
	}
</style>
